<!-- 我的 - 订单详情 -->
<template>
  <view class="pb-20">
    <image class="absolute left-0 top-0 w-full h-439" src="/static/images/user/bg_order_top.png" />
    <u-navbar title="订单详情" :background="{ background: navBackground }" :border-bottom="true" />
    <view class="relative h-262">
      <view class="reactive z-2 p-4">
        <view class="c-#333 text-40 font-bold mb-1">{{ statusLabel }}</view>
        <view class="c-#666 text-28">{{ statusDesc }}</view>
      </view>
    </view>
    <!-- 课程信息 -->
    <view class="content-card relative z-3" @click="onCourseClick">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">课程信息</view>
      </view>
      <view class="ml-4">
        <!-- 线上课程 -->
        <view v-if="state.orderType == 'online'" class="flex">
          <view class="flex-shrink-0 relative w-240 h-160 mr-3">
            <u-image width="100%" height="100%" border-radius="12"
              :src="state.detailData?.curriculum?.id ? state.detailData?.curriculum?.cover_image : state.detailData?.cover_image" />
          </view>
          <view class="flex-1 flex flex-col justify-between text-single">
            <view class="c-#333 text-28 font-bold text-single">{{ state.detailData?.curriculum?.id ?
              state.detailData?.curriculum?.class_name : state.detailData?.class_name }}</view>
            <view>
              <view class="c-#B5B5B5 text-24 text-single">{{ state.detailData?.curriculum?.id ?
                state.detailData?.curriculum?.desc : state.detailData?.desc }}</view>
              <view class="flex items-center mt-1">
                <view class="flex-1 flex items-center text-single">
                  <u-image width="32" height="32" shape="circle"
                    :src="state.detailData?.curriculum?.id ? state.detailData?.curriculum?.teacher_image : state.detailData?.teacher_image" />
                  <view class="ml-1 c-#999 text-26 text-single">{{ state.detailData?.curriculum?.id ?
                    state.detailData?.curriculum?.teacher_name : state.detailData?.teacher_name }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 线下课程 -->
        <view v-if="state.orderType == 'offline'" class="flex">
          <view class="flex-shrink-0 relative w-240 h-240 mr-3">
            <view class="tag-num">{{ state.detailData?.curriculum?.id ? state.detailData?.curriculum?.periods_number : state.detailData?.periods_number }}</view>
            <u-image width="100%" height="100%" border-radius="12" :src="state.detailData?.curriculum?.id ? state.detailData?.curriculum?.cover_image : state.detailData?.cover_image" />
          </view>
          <view class="flex-1 flex flex-col text-lines-2">
            <view class="flex-shrink-0 c-#333 text-28 font-bold text-lines-2 mb-7">{{ state.detailData?.curriculum?.id ? state.detailData?.curriculum?.title : state.detailData?.title
            }}</view>
            <view>
              <view class="flex overflow-x-scroll">
                <text v-for="(item, index) in (state.detailData?.curriculum?.id ? state.detailData?.curriculum?.labels : state.detailData?.labels)" :key="index"
                  class="tag-classfy mr-1">{{ state.detailData?.curriculum?.id ? item.category_name : item }}</text>
              </view>
              <view class="flex items-center mt-3">
                <view class="flex-1 flex items-center text-single">
                  <image class="w-20 h-20" src="/static/images/user/ic_clock.png"></image>
                  <view class="ml-1 c-#B5B5B5 text-24">{{ dateFormat(state.detailData?.curriculum?.id ? state.detailData?.curriculum?.class_time : state.detailData?.class_time,
                    'YYYY-MM-DD') }}</view>
                </view>
                <view class="flex-shrink-0 flex items-center">
                  <image class="w-16 h-22" src="/static/images/user/ic_address.png"></image>
                  <view class="ml-1 c-#B5B5B5 text-24">{{ state.detailData?.curriculum?.id ? state.detailData?.curriculum?.province_name : state.detailData?.province_name }}·{{
                    state.detailData?.curriculum?.id ? state.detailData?.curriculum?.city_name : state.detailData?.city_name }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-line color="#EEEEEE" :hair-line="false" margin="20rpx 0" />
        <view class="flex items-end">
          <view class="flex-1 c-#666 text-28">产品总价:￥{{ state.detailData?.order_amount }}</view>
          <view class="flex-shrink-0 flex flex-col items-end">
            <view v-if="state.orderType == 'offline'" class="c-#333 text-28">
              <text>实付款：</text>
              <text class="c-#FF513A text-36">￥{{ state.detailData?.pay_money }}</text>
            </view>
            <view v-else class="c-#333 text-28">
              <text>{{ state.detailData?.order_status == 1 ? '实付款' : '应付款' }}：</text>
              <text class="c-#FF513A text-36">￥{{ state.detailData?.pay_money }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-#F5F5F5 h-12 w-full" />
    <!-- 支付凭证 -->
    <view v-if="state.orderType == 'offline' && state.detailData?.order_status >= 1 && state.detailData?.pay_money"
      class="bg-white p-4 mt-3">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">支付凭证</view>
      </view>
      <view class="ml-4">
        <u-image width="144" height="144" border-radius="12" :src="state.detailData?.pay_image" />
      </view>
    </view>
    <view class="bg-#F5F5F5 h-12 w-full" />
    <!-- 预约信息 -->
    <view v-if="state.orderType == 'offline'" class="bg-white p-4 mt-3">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">预约信息</view>
      </view>
      <view class="ml-4">
        <view class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">联系人：</view>
          <view class="flex items-center c-#999 text-28">{{ state.detailData?.contact }}</view>
        </view>
        <view class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">公司：</view>
          <view class="flex items-center c-#999 text-28">{{ state.detailData?.company_name }}</view>
        </view>
        <view class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">手机号：</view>
          <view class="flex items-center c-#999 text-28">{{ state.detailData?.mobile }}</view>
        </view>
        <view class="flex justify-between items-center">
          <view class="c-#666 text-28">人数：</view>
          <view class="flex items-center c-#999 text-28">{{ state.detailData?.person_num }}人</view>
        </view>
      </view>
    </view>
    <view class="bg-#F5F5F5 h-12 w-full" />
    <!-- 上课流程 -->
    <view v-if="state.orderType == 'offline'" class="bg-white p-4 mt-3">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">上课流程</view>
      </view>
      <view>
        <u-steps :list="stepList" mode="number" :current="-1" active-color="#F4AF22" un-active-color="#F4AF22"></u-steps>
      </view>
    </view>
    <!-- 官方电话 -->
    <view class="bg-#F5F5F5 h-12 w-full" />
    <view v-if="state.orderType == 'offline'" class="bg-white p-4 mt-3">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">官方电话</view>
      </view>
      <view class="flex items-center ml-4">
        <view class="mr-2 c-#666 text-28" @click="callPhone('0592-5610311')">0592-5610311</view>
        <image class="w-30 h-30" src="/static/images/user/ic_phone.png" />
      </view>
    </view>
    <view class="bg-#F5F5F5 h-12 w-full" />
    <!-- 订单信息 -->
    <view class="bg-white p-4 mt-3">
      <view class="flex items-center mb-3">
        <view class="w-6 h36 bg-#F4AF22" />
        <view class="ml-4 c-#333 text-32 font-bold">订单信息</view>
      </view>
      <view class="ml-4">
        <view class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">订单编号：</view>
          <view class="flex items-center c-#999 text-28">
            <view>{{ state.detailData?.order_sn }}</view>
            <view class="ml-2.5 px-2 py-0.5 bg-#F6F6F6 rounded-1 c-#999 text-20"
              @click="copyText(state.detailData?.order_sn)">复制</view>
          </view>
        </view>
        <!-- 线上课程订单信息 -->
        <view v-if="state.orderType == 'online'" class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">下单时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.createtime, 'YYYY.MM.DD HH:mm')
          }}</view>
        </view>
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 2"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">取消时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.cancel_time, 'YYYY.MM.DD HH:mm')
          }}</view>
        </view>
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 1"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">付款时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.pay_time, 'YYYY.MM.DD HH:mm') }}
          </view>
        </view>
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 1"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">支付方式：</view>
          <view class="flex items-center c-#999 text-28">微信支付</view>
        </view>
        <!-- 线下课程订单信息 -->
        <view v-if="state.orderType == 'offline'" class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">预约时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.createtime, 'YYYY.MM.DD HH:mm')
          }}</view>
        </view>
        <view
          v-if="state.orderType == 'offline' && (state.detailData?.order_status == 1 || state.detailData?.order_status == 2)"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">确认时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.pay_time, 'YYYY.MM.DD HH:mm') }}
          </view>
        </view>
        <view v-if="state.orderType == 'offline' && state.detailData?.order_status == 2"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">结束时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.finish_time, 'YYYY.MM.DD HH:mm')
          }}</view>
        </view>
        <view v-if="state.orderType == 'offline' && state.detailData?.order_status == 3"
          class="flex justify-between items-center mb-2">
          <view class="c-#666 text-28">取消时间：</view>
          <view class="flex items-center c-#999 text-28">{{ dateFormat(state.detailData?.cancel_time, 'YYYY.MM.DD HH:mm')
          }}</view>
        </view>
      </view>
    </view>
    <!-- 线上课程操作按钮 -->
    <view v-if="showOptionBtn" class="bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view
        :class="['mt-1 flex items-center', state.orderType == 'online' && state.detailData?.order_status == 0 ? 'justify-center' : 'justify-end']">
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 0"
          class="c-#FF513A text-40 font-bold">￥{{ state.detailData?.order_amount }}</view>
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 0" class="ml-6 mr-3 btn btn-cancel"
          @click="onCancel">取消订单</view>
        <view v-if="state.orderType == 'offline' && state.detailData?.order_status == 0" class="ml-6 mr-3 btn btn-cancel"
          @click="onCancelOffline">取消预约</view>
        <view v-if="state.orderType == 'online' && state.detailData?.order_status == 0" class="btn btn-confrim"
          @click="onPay">去付款</view>
        <view v-if="state.detailData?.order_status == 1" class="btn btn-confrim mr-4" @click="onCourseClick">查看课程</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { callPhone, navigate, showModal, showToast, copyText } from '@/common/util/uni'
import { dateFormat } from '@/common/util/date'
import { refreshPrePage } from '@/common/util/util'
import { wxPay } from '@/common/util/wx'
import { stepList, onlineStatusList, offlineStatusList } from '@/common/constant/order'
import { getOrderOnlineDetail, getOrderOfflineDetail, postOrderOnlineCancel, postOrderOnlineTopay, postOrderOfflineCancel } from '@/common/http/module/order'

const state = reactive({
  order_id: '', // 订单id
  detailData: null, // 订单详情
  status: 3, // 0-待支付 1-已取消 2-已付款 3-待确认 4-待上课 5-已结束 6-已取消
  orderType: '' // online-线上课程  offline-线下课程
})

// 显示底部操作按钮判断
const showOptionBtn = computed(() => {
  const onlineHide = state.orderType == 'online' && state.detailData?.order_status != 2
  const offlineHide = state.orderType == 'offline' && state.detailData?.order_status <= 1
  return onlineHide || offlineHide
})
const statusLabel = computed(() => {
  let orderStatusList = state.orderType == 'online' ? onlineStatusList : offlineStatusList
  return orderStatusList.find(v => v.value == state.detailData?.order_status)?.label
})
const statusDesc = computed(() => {
  let orderStatusList = state.orderType == 'online' ? onlineStatusList : offlineStatusList
  return orderStatusList.find(v => v.value == state.detailData?.order_status)?.desc
})
const navBackground = ref('transparent')

function onCourseClick () {
  if (!state.detailData?.curriculum?.id) {
    showToast('课程已删除', 'none')
    return
  }
  if (!state.detailData?.curriculum?.status) {
    showToast('课程已下架', 'none')
    return
  }
  const url = state.orderType == 'online' ? '/package_square/pages/course/detail' : '/package_square/pages/course/preview/detail'
  navigate(`${url}?id=${state.detailData?.class_id}`)
}

// 取消订单
function onCancel () {
  showModal({
    content: '是否确认取消订单？',
    confirmText: '确定',
    cancelText: '取消',
    success: ({ confirm }) => {
      if (confirm) {
        postOrderOnlineCancel({ order_id: state.order_id }).then(() => {
          showToast('取消成功')
          loadData()
          refreshPrePage('refresh')
        })
      }
    }
  })
}

// 去付款
function onPay () {
  postOrderOnlineTopay({ order_id: state.order_id }).then(res => {
    wxPay(res.data)
      .then(() => {
        showToast('支付成功', '')
        loadData()
        refreshPrePage('refresh')
      }).catch(() => {
        showToast('支付失败', 'error')
      })
  })
}

// 取消预约
function onCancelOffline () {
  showModal({
    content: '是否确认取消预约？',
    confirmText: '确定',
    cancelText: '取消',
    success: ({ confirm }) => {
      if (confirm) {
        postOrderOfflineCancel({ order_id: state.order_id }).then(() => {
          showToast('取消成功')
          loadData()
          refreshPrePage('refresh')
        })
      }
    }
  })
}

// 获取订单详情
function loadData () {
  const requestMethod = state.orderType == 'online' ? getOrderOnlineDetail : getOrderOfflineDetail
  requestMethod(state.order_id).then(res => {
    state.detailData = res.data
  })
}

onLoad(options => {
  state.order_id = options.order_id
  state.orderType = options.type
  loadData()
})

onPageScroll(e => {
  const scrollTop = e.scrollTop
  navBackground.value = scrollTop > 100 ? 'white' : 'transparent'
})
</script>

<style lang="scss" scoped>
:deep(.u-steps .u-steps__item__text--row) {
  color: #666 !important;
  font-size: 28rpx !important;
}

// :deep(.u-steps .u-steps__item__num) {
//   background: transparent !important;
// }
// :deep(.u-steps .u-steps__item__num) u-icon { 
//   display: none !important;
// }
.content-card {
  margin-top: -80rpx;
  padding: 26rpx 32rpx;
  border-radius: 12rpx 12rpx 0rpx 0rpx;
  background-color: #FFFFFF;
  box-shadow: 4.662875652313232px -3.7759222984313965px 8px 0px rgba(248, 220, 97, 0.18);
}

.tag-num {
  min-width: 100rpx;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  border-radius: 12rpx 0rpx 12rpx 0rpx;
  background-color: rgba(244, 175, 34, .75);
  padding: 4rpx 20rpx;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
}

.tag-classfy {
  min-width: 120rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background-color: #E5E5E5;
  color: #8C8C8C;
  font-weight: 400;
  font-size: 24rpx;
}

.btn {
  width: 220rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  border-radius: 12rpx;
}

.btn-cancel {
  color: #F4AF22;
  border: 2rpx solid #F4AF22;
}

.btn-confrim {
  background-color: #F4AF22;
  color: #FFFFFF;
}</style>
